<template>
	<view class="con">
		<view class="top flex flex_between">
			<view hover-class="none" @click="goSubsidyZone" class="topli">
				<view class="topli_t1">Prek<text>price</text></view>
				<view class="topli_t2">补贴专区</view>
			</view>
			<view hover-class="none" @click="goExpressRecycling" class="topli">
				<view class="topli_t1">Express<text>back</text></view>
				<view class="topli_t2">快递回收</view>
			</view hover-class="none" url="/packageA/index/subsidyZone">
		</view>
		<!-- 列表 -->
		<view class="list flex">
			<view class="listli" @click="goSubsidyZone">
				<image class="listli_img" mode="widthFix" src="/static/index/img05.png"></image>
				<view class="listli_c">汐汐礼金</view>
			</view>
      <view class="listli" @click="goGoodThings">
      	<image class="listli_img" mode="widthFix" src="/static/index/img07.png"></image>
      	<view class="listli_c">好物有礼</view>
      </view>
			<!-- <view class="listli" @click="goExpressRecycling">
				<image class="listli_img" mode="widthFix" src="/static/index/img07.png"></image>
				<view class="listli_c">快递回收</view>
			</view> -->
			<view hover-class="none" @click="goProductOperation" class="listli">
				<image class="listli_img" mode="widthFix" src="/static/index/img04.png"></image>
				<view class="listli_c">产品运营</view>
			</view>
			<view class="listli" @click="goReservation">
				<image class="listli_img" mode="widthFix" src="/static/index/img03.png"></image>
				<view class="listli_c">每日一茅</view>
			</view>
      <view class="listli" @click="goXianYU">
      	<image class="listli_img" mode="widthFix" src="/static/index/img33.png"></image>
      	<view class="listli_c">闲鱼宝藏</view>
      </view>
			<view class="listli" v-if="index>0" v-for="(item,index) in navList" :key="index" @click="goProductDetail(item)">
				<image class="listli_img" mode="widthFix" :src="item.pic"></image>
				<view class="listli_c">{{item.title}}</view>
			</view>
		</view>
		<!-- 热门赛道 -->
		<view class="rem">
			<view class="rem_t">热门赛道</view>
			<view class="remc flex flex_between">
				<!-- 左边 -->
				<view class="remcz" @click="goProductDetail(item)" v-for="(item,index) in hotList" :key="index"
					v-if="index===0">
					<view class="shangXiaCenter" style="height: 266rpx;">
						<view>
							<view class="remcz_1">{{item.title}}</view>
							<view class="remcz_2">{{item.des}}</view>
							<view class="remcz_3"><text v-for="item2 in item.tags" v-if="item2">{{item2}}</text></view>
						</view>
						<!-- <view class="remcz_4">
							<view class="remcz_4_1">￥<text>{{item.price}}</text></view>
						</view> -->
					</view>
					<image class="remcz_4_img1" mode="widthFix" :src="item.pic"></image>
				</view>
				<!-- 右边 -->
				<view class="remcy">
					<view class="remcy_li shangXiaCenter" @click="goProductDetail(item)" v-for="(item,index) in hotList"
						:key="index" v-if="index>0">
						<view>
							<view class="remcz_1">{{item.title}}</view>
							<view class="remcz_2">{{item.des}}</view>
							<view class="remcz_3"><text v-for="item2 in item.tags" v-if="item2">{{item2}}</text></view>
						</view>
						<view class="remcz_5 flex flex_between">
							<view class="remcz_4_1"></view>
							<image class="remcz_5_img1" mode="widthFix" :src="item.pic"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 推荐赛道 -->
		<view class="rem" style="margin-bottom: 0;">
			<view class="rem_t">推荐赛道</view>
			<view class="tuijian flex flex_between">
				<view class="tuijianli" @click="goProductDetail(item)" v-for="(item,index) in tuiList" :key="index">
					<image class="tuijianli_img" :src="item.pic" mode="widthFix"></image>
					<view class="tuijianli_c">
						<view class="remcz_1 remcz_1_te">{{item.title}}</view>
						<!-- <view class="remcz_4_1">￥<text>{{item.price}}</text></view> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 点击“补贴专区”“特惠专区”“快递回收”---出现一个弹窗，让他先去购买，才有权限进入，后面对接数据会根据数据判断有没有权限进入 -->
		<view class="zhezhao" v-if="isShow || isShow_init1 || isShow_init2" @click="hideTan"></view>
		<view class="tan" v-if="isShow">
			<view class="zhes_1 flex">
				<image class="zhes_1_img" src="/static/index/img18.png" mode="widthFix"></image>
				<text class="zhes_1_t">暂无权限</text>
			</view>
			<view class="zhes_2 flex flex_between">
				<view class="zhes_2li">项目为陌上未来内部运营项目，不完全对外</view>
			</view>
			<view class="zhes_3">（需要你有很好的执行力和团队意识）</view>
			<view class="zhes_4">项目为快递掘金，每天2小时，稳定日收益300+，可矩阵放大，感兴趣请查看详情</view>
			<view class="zhes_5" @click="goProductDetail(kdjjInfo)">查看课程详细介绍</view>
		</view>
		<!-- 初次访问弹框 -->
		<!-- <view class="tan tan_init1" v-if="isShow_init1">
			<view class="tan_title">欢迎加入陌上未来</view>
			<view class="tan_t flex">
				<view class="">
					<view class="newxin">
						<view class="newxin_1">感谢您信任并使用陌上未来</view>
						<view class="newxin_2">我们深知个人信息的重要性，我们将按法律法规采取相应保护措施，尽力保护您的信息安全。在使用前，请仔细阅读并理解:</view>
						<view class="newxin_2">我们会根据您使用服务的具体功能需要，收集必要的用户信息。为了更好地保障您的个人权益，请您认真阅读<text>《陌上未来用户注册服务协议》</text>和<text>《陌上未来小程序隐私保护指引》</text>，了解我们收集、使用、存储、分享个人信息的情况，以及对您个人信息的安全保护措施</view>	
						<view class="newxin_2">如您理解并接受上述内容，请点击“同意”开始接受我们的服务</view>
					</view>
				</view>
		
			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d1" @click="goinit2">拒绝</view>
				<view class="tan_b_d2" @click="agress">同意</view>
			</view>
		</view> -->
		<!-- 初次访问弹框2 -->
		<!-- <view class="tan tan_init2" v-if="isShow_init2">
			<view class="tan_title">非常遗憾</view>
			<view class="tan_t flex">
				<view class="">
					<view class="newxin" style="background: none;">
						<view class="newxin_2" style="margin-bottom: 0;">非常遗憾，若您不同意《陌上未来用户注册服务协议》和《陌上未来小程序隐私保护指引》，我们将无法为您提供服务</view>
					</view>
				</view>
		
			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d1" @click="hideTan">关闭小程序</view>
				<view class="tan_b_d2" @click="goinit1">我再想想</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		// getOpenid, //获取openid
		getLoginUser, //获取用户信息
		getIndexInfo, //获取首页
	} from '@/request/api.js'
	export default {
		data() {
			return {
				codeGetOpenid: uni.getStorageSync('codeGetOpenid'), //获取code---用于请求后端接口-获取openid'
				openid: uni.getStorageSync('openid'), //获取缓存的openid
				userInfo: uni.getStorageSync('userInfo'), //获取用户头像昵称
				isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
				isShow: false,
				pid: '',
				// isShow_init1:false,
				// isShow_init2:false,
				hotList: [], //热门赛道
				tuiList: [], //热门赛道
				navList: [], //nav
				isHasByCourse: false, //是否购买过对应的“快递掘金”课程
				kdjjInfo: {} //快递掘金课程的信息--从首页列表中获取
			}
		},
		onLoad(options) {
			this.getIndexInfoFun(); //获取首页信息
			console.log('进入首页--获取options')
			const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			console.log(options)
			console.log(options.pid)
			console.log(q)
			if (options.pid) {
				// 通过分享页面进的
				console.log('通过分享页面进的')
				uni.setStorageSync('pid', options.pid)

			} else if (q) {
				// 通过扫描二维码进的
				console.log('通过扫描二维码进的')
				var match = q.match(/\?(.+)/);
				if (match && match.length > 1) {
					var queryString = match[1].split("=")[1]; // 获取到的查询字符串
					console.log('pid是多少'); // 输出: data=12345
					console.log(queryString); // 输出: data=12345
					uni.setStorageSync('pid', queryString)
				} else {
					console.log('No query string found.');
				}
			}
		},
		onShow() {
			this.isLogin = uni.getStorageSync('isLogin') || 1
			this.isShow = false
			if (this.openid) {
				console.log('走了吗')
				this.getLoginUserFun() //获取用户信息--通过接口
			}
      if (this.isLogin === 1) {
      	console.log('未授权登录')
        uni.hideShareMenu()
      }else{
        uni.showShareMenu({
        	withShareTicket: true,
        	menus: ["shareAppMessage", "shareTimeline"]
        })
      }
			// this.getOpenidFun();//获取openid
		},
		methods: {
			// 获取用户信息--通过接口
			getLoginUserFun() {
				let that = this
        if(!this.openid){
          that.userInfo = uni.getStorageSync('userInfo');
          console.log('userInfo这是多少')
          console.log(that.userInfo)
          return
        }
				getLoginUser({
					openid: this.openid,
					pid: uni.getStorageSync('pid') || ''
				}).then(res => {
					console.log('首页--获取用户信息')
					console.log(res)
					if (res.error_code === 0) { 
						uni.setStorageSync('userInfo', res.data);
						that.userInfo = that.userInfo
						that.$forceUpdate()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// getOpenidFun(){
			// 	let param = {
			// 		codeGetOpenid:this.codeGetOpenid
			// 	}
			// 	getOpenid(param).then(res=>{
			// 		console.log('获取openid----通过后端接口')
			// 		console.log(res)
			// 	})
			// },

			//获取首页信息
			getIndexInfoFun() {
				getIndexInfo().then(res => {
					console.log('获取首页信息')
					this.isHasByCourse = res.data.open === 'y' ? true : false //快递掘金开关
					this.hotList = res.data.hot
					this.navList = res.data.nav
					console.log('热门赛道')
					console.log(this.hotList)
					this.hotList.forEach(item => {
						if (item.title === '快递掘金') {
							this.kdjjInfo = item
						}
					})
					console.log('推荐赛道')
					this.tuiList = res.data.tui
				})
			},
			// 点击头部-补贴专区-和下面的"补贴专区"
			// 1：如果没有登录，提示他先登录，
			// 2：登录后，点击时候进行当前用户权限判断，判断是否购买过对应的“快递掘金”课程，只有购买过的才能访问，未购买的“弹出提示”引导到快递掘金产品详情页面
			goSubsidyZone() {
				if (this.isLogin === 1) {
					console.log('未授权登录')
					uni.showToast({
						icon: 'none',
						title: '未登录，先进行授权登录'
					})
				} else {
					// if(!this.isHasByCourse){
					//   this.isShow = true
					// }else{
					//   uni.navigateTo({
					//     url:"/packageA/index/subsidyZone"
					//   })
					// }
					console.log('点击补贴专区-用户信息')
					this.getLoginUserFun()
					console.log(this.userInfo)
					// 判断是否有 补贴权限
					if (this.userInfo.is_butie && this.userInfo.is_butie === '1') {
						uni.navigateTo({
							url: "/packageA/index/subsidyZone"
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '很抱歉，暂无权限'
						})
					}
				}
			},
      
      // 好物有礼
      goGoodThings(){
        uni.navigateTo({
        	url: "/packageA/index/goodThings"
        })
      },

			// 点击头部-快递回收-和下面的"快递回收"
			// 1：如果没有登录，提示他先登录，
			// 2：登录后，点击时候进行当前用户权限判断，判断是否购买过对应的“快递掘金”课程，只有购买过的才能访问，未购买的“弹出提示”引导到快递掘金产品详情页面
			goExpressRecycling() {
        uni.showToast({
          icon: 'none',
          title: '暂停应用'
        })
				// if (this.isLogin === 1) {
				// 	console.log('未授权登录')
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '未登录，先进行授权登录'
				// 	})
				// } else {
				// 	console.log('点击快递回收-用户信息')
				// 	this.getLoginUserFun()
				// 	console.log(this.userInfo)
				// 	// 判断是否有 快递回收权限
				// 	if (this.userInfo.is_express && this.userInfo.is_express === '1') {
				// 		uni.navigateTo({
				// 			url: "/packageA/index/expressRecycling"
				// 		})
				// 	} else {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '很抱歉，暂无权限'
				// 		})
				// 	}
				// }
			},

			// 点击头部-产品运营-和下面的"产品运营"
			// 1：如果没有登录，提示他先登录，
			// 2：登录后，点击时候进行当前用户权限判断，判断是否购买过对应的“快递掘金”课程，只有购买过的才能访问，未购买的“弹出提示”引导到快递掘金产品详情页面
			goProductOperation() {
				if (this.isLogin === 1) {
					console.log('未授权登录')
					uni.showToast({
						icon: 'none',
						title: '未登录，先进行授权登录'
					})
				} else {
					uni.navigateTo({
						url: "/packageA/index/productOperation"
					})
					// if (!this.isHasByCourse) {
					// 	this.isShow = true
					// } else {
					// 	uni.navigateTo({
					// 		url: "/packageA/index/productOperation"
					// 	})
					// }
					// console.log('点击产品运营-用户信息')
					// this.getLoginUserFun()
					// console.log(this.userInfo)
					// // 判断是否有 运营权限
					// if (this.userInfo.is_operate && this.userInfo.is_operate === '1') {
					// 	uni.navigateTo({
					// 		url: "/packageA/index/productOperation"
					// 	})
					// } else {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '很抱歉，暂无权限'
					// 	})
					// }
				}
			},

			// 1：如果没有登录，提示他先登录，
			// 2：登录后，点击时候进行当前用户权限判断，判断是否购买过对应的“快递掘金”课程，只有购买过的才能访问，未购买的“弹出提示”引导到快递掘金产品详情页面
			goReservation() {
				if (this.isLogin === 1) {
					console.log('未授权登录')
					uni.showToast({
						icon: 'none',
						title: '未登录，先进行授权登录'
					})
				} else {
					if (!this.isHasByCourse) {
						this.isShow = true
					} else {
						uni.navigateTo({
							url: "/packageA/index/reservation"
						})
					}
				}
			},



			showTan() {
				this.isShow = true
			},
			hideTan() {
				this.isShow = false
			},
			// 进入-详情单页
			// goDetail(){
			// 	uni.navigateTo({
			// 		url:'/packageA/index/detail'
			// 	})
			// },
			// 进入-产品详情页
			goProductDetail(item) {
				console.log(item)
				if (item.id === 0 || item.id === '0') {
					return
				}
				uni.navigateTo({
					url: '/packageA/index/productDetail?id=' + item.id + '&title=' + item.title
				})
			},
      
      // 点击进入--闲鱼宝藏
      goXianYU(){
        if (this.isLogin === 1) {
        	console.log('未授权登录')
        	uni.showToast({
        		icon: 'none',
        		title: '未登录，先进行授权登录'
        	})
        } else {
        	console.log('点击闲鱼宝藏-用户信息')
        	this.getLoginUserFun()
        	console.log(this.userInfo)
        	// 判断是否有 闲鱼宝藏权限
        	if (this.userInfo.is_xian && this.userInfo.is_xian === '1') {
        		uni.navigateTo({
        			url: "/packageA/index/xianYu"
        		})
        	} else {
        		uni.showToast({
        			icon: 'none',
        			title: '很抱歉，暂无权限'
        		})
        	}
        }
        	// uni.navigateTo({
        	// 	url:'/packageA/index/xianYu'
        	// })
      }
      
		},
		// 分享微信好友
		onShareAppMessage(event) {
			console.log(event);
        return {
        	title: '陌上未来，没有焦虑的未来',
        	path: '/pages/index/index?pid=' + uni.getStorageSync('userInfo').id,
        	// imageUrl: imageUrl
        }
		},
		//分享到朋友圈
		onShareTimeline(event) {
			console.log(event);
			return {
				title: '陌上未来，没有焦虑的未来',
				path: '/pages/index/index?pid=' + uni.getStorageSync('userInfo').id,
				query: 'pid=' + uni.getStorageSync('userInfo').id,
				// imageUrl: imageUrl
			}
		}
	}
</script>

<style scoped lang="scss">
	.con {
		.top {
			width: 100%;
			height: auto;

			.topli {
				width: 346rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				padding-top: 26rpx;
				box-sizing: border-box;

				.topli_t1 {
					font-family: 'AvantGardeFont';
					color: rgba(16, 16, 16, 1);
					font-size: 48rpx;
					font-weight: bold;

					text {
						font-weight: 100;
					}
				}

				.topli_t2 {
					color: rgba(0, 0, 0, 1);
					font-size: 28rpx;
				}
			}
		}

		.list {
			width: 100%;
			height: auto;
			flex-wrap: wrap;
			padding: 50rpx 0;
			padding-bottom: 0rpx;

			.listli {
				width: 25%;
				text-align: center;
				margin-bottom: 40rpx;

				.listli_img {
					width: 40rpx;
					height: auto;
				}

				.listli_c {
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
				}
			}
		}

		.rem {
			width: 100%;
			height: auto;
			margin-top: 30rpx;
			margin-bottom: 50rpx;

			.rem_t {
				color: rgba(0, 0, 0, 1);
				font-size: 36rpx;
				margin-bottom: 30rpx;
				padding-left: 30rpx;
			}

			.remc {
				width: 100%;
				height: auto;

				.remcz {
					width: 346rpx;
					padding: 24rpx 30rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					background: #fff;
					height: 662rpx;
					position: relative;
					overflow: hidden;
					padding-top: 32rpx;
				}

				.remcz_2 {
					color: rgba(137, 137, 137, 1);
					font-size: 24rpx;
					height: 34rpx;
					line-height: 34rpx;
					overflow: hidden;
					margin-bottom: 16rpx;
				}

				.remcz_3 {
					color: rgba(0, 0, 0, 1);
					font-size: 22rpx;
					background: #F9BF41;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 20rpx;
					// padding: 0 16rpx;
					display: inline-block;
					overflow: hidden;

					text {
						background: #F9BF41;
						padding: 0 16rpx;
						display: inline-block;
					}
				}

				.remcz_4 {
					margin-top: 55rpx;
				}

				.remcz_4_img1 {
					width: 100%;
					height: auto;
					position: absolute;
					bottom: 30rpx;
					width: 280rpx;
				}

				.remcy {
					width: 346rpx;
					height: 662rpx;
					overflow: hidden;
				}

				.remcy_li {
					width: 100%;
					padding: 24rpx 30rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					background: #fff;
					margin-bottom: 20rpx;
					padding-top: 32rpx;
					height: 320rpx;
					box-sizing: border-box;
				}

				.remcz_5 {
					align-items: baseline;
					// margin-top: 20rpx;
				}

				.remcz_5_img1 {
					width: 92rpx;
					height: auto;
				}
			}
		}

		.remcz_1 {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			height: 34rpx;
			line-height: 34rpx;
			overflow: hidden;
			margin-bottom: 16rpx;
		}

		.remcz_4_1 {
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			margin-left: -4rpx;

			text {
				font-family: 'AvantGardeFont';
				font-size: 40rpx;
			}
		}

		.tuijian {
			width: 100%;
			height: auto;
      flex-wrap: wrap;
			.tuijianli {
				width: 346rpx;
				height: auto;
				background: #fff;
				border-radius: 20rpx;
        margin-bottom: 20rpx;
				.tuijianli_img {
					width: 100%;
					height: 346rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}

				.tuijianli_c {
					width: 100%;
					height: auto;
					padding: 20rpx 30rpx;
					box-sizing: border-box;

					.remcz_1_te {
						margin-bottom: 30rpx;
					}
				}
			}
		}

		.zhes_1 {
			width: 100%;
			height: auto;
			text-align: center;
			margin-bottom: 28rpx;
			justify-content: center;

			.zhes_1_img {
				width: 40rpx;
				height: auto;
				margin-right: 8rpx;
			}

			.zhes_1_t {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.zhes_2 {
			width: 100%;
			height: auto;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;

			.zhes_2li {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
				font-weight: bold;

				text {
					font-family: 'AvantGardeFont';
				}
			}
		}

		.zhes_3 {
			height: 32rpx;
			line-height: 32rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			width: 100%;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.zhes_4 {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			background-color: rgba(238, 238, 238, 1);
			padding: 20rpx 30rpx;
			color: rgba(249, 65, 65, 1);
			font-size: 24rpx;
			box-sizing: border-box;
			line-height: 40rpx;
			margin-bottom: 48rpx;
		}

		.zhes_5 {
			width: 100%;
			height: 72rpx;
			border-radius: 100rpx;
			background-color: rgba(249, 191, 65, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			text-align: center;
			line-height: 72rpx;
		}

		.tan {
			padding-bottom: 56rpx;
			margin-top: -272rpx;
		}
	}

	.newxin {
		width: 560rpx;
		height: auto;
		border-radius: 20rpx;
		background-color: rgba(238, 238, 238, 1);
		padding: 24rpx;
		box-sizing: border-box;

		.newxin_1 {
			line-height: 36rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.newxin_2 {
			line-height: 36rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			margin-bottom: 20rpx;

			text {
				font-weight: bold;
			}
		}
	}

	.tan.tan_init1 {
		margin-top: -457rpx;
	}
</style>